<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
const option = reactive({
  color: ["#FFD91A", "#18F6F8", "#288CFC",],
  legend: {
    top: "5%",
    icon: "circle",
    color: "#3AFFFD",
    itemWidth: 10,
    itemHeight: 10,
    data: [
      {
        name: "报废物资",
        textStyle: {
          color: "#FFD91A", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "借用物资",
        textStyle: {
          color: "#18F6F8", // 单独设置某一个图列的颜色
        },
      },
      {
        name: "领用物资",
        textStyle: {
          color: "#288CFC", // 单独设置某一个图列的颜色
        },
      },
    ],
  },
  tooltip: {
    confine: true,
    trigger: "item",
    formatter: "{b} : {c}",
  },
  series: [
    {
      avoidLabelOverlap: false,
      type: "pie",
      roseType: "area", // 玫瑰图
      center: ["50%", "50%"],
      radius: ["0%", "60%"],
      label: {
        formatter: "{b}\n---------\n{d}%\t({c})",
        fontSize: 16,
        color: '#3AFFFD'
      },
      labelLine: {
        length: 10,
        length2: 30,
      },
      data: [
        {
          name: "报废物资",
          value: 1250,
        },
        {
          name: "借用物资",
          value: 2100,
        },
        {
          name: "领用物资",
          value: 2502,
        },

      ],
    },
  ],
});
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
